<template>
  <view class="custom-detail-step" :class="{active: active}">
    <view
      v-for="(item, index) in list"
      :key="index"
      class="step-item">
      <view class="step-icon-item">
        <!-- <img class="icon-image" :src="item.icon" alt=""> -->
        <view class="step-icon-wrapper"><basic-icons :name='item.icon' size="28rpx"></basic-icons></view>
        <!-- 横线 -->
        <view class="step-line"
        :class="{
          'left-half': index >= list.length - 1,
          'right-half': index <= 0
        }"></view>
      </view>

      <view
        class="step-desc">{{item.name}}</view>
    </view>
	</view>
</template>

<script>
/**
 * steps 步骤条
 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
 * @property {Array} list 数轴条数据，数组。具体见上方示例
 */
export default {
	name: 'comp-steps',
	props: {
    active: { // 是否激活
      type: Boolean,
      default: false
    }
	},
	data() {
		return {
      list: [
        { name: '提交需求', icon: 'icon-check' },
        { name: '定制行程', icon: 'icon152' },
        { name: '确认付款', icon: 'icon145' },
        { name: '快乐出行', icon: 'icon151' },
      ]
    }
	},
};
</script>

<style lang="less">
.custom-detail-step {
  .flex;

  color: #1B2431;
  background: #FFFFFF;
  box-shadow: 0px 4rpx 60rpx 0px rgba(0, 0, 0, 0.04);
  border-radius: 16rpx;

  &.active {
    .step-line {
      border-color: @theme_color;
    }

    .step-icon-item .step-icon-wrapper {
      background-color: @theme_color;
    }
  }

  .step-item {
    .flex;
    .flex-1;
    .flex-center;
    .flex-column;
    
    height: 174rpx;
  }

  .step-line {
    position: absolute;
    width: 100%;
    top: 50%;
    right: 0;
    z-index: -1;
    border: 2rpx solid #909BB1;

    &.left-half {
      right: 50%;
      width: 50%;
    }

    &.right-half {
      left: 50%;
      right: unset;
      width: 50%;
    }
  }
  
  .step-desc {
    font-size: 24rpx;
    text-align: center;
    margin-top: 8rpx;
  }

  .step-icon-item {
    .flex;
    .flex-middle;
    .flex-center;
    position: relative;
    z-index: 1;

    color: #ffffff;
    

    .step-icon-wrapper {
      .flex;
      .flex-middle;
      .flex-center;
      // padding: 8rpx 0;
      text-align: center;

      width: 50rpx;
      height: 50rpx;
      border-radius: 100%;
      background-color: #909BB1;
    }

    // .icon-image {
    //   width: 44rpx;
    //   height: 44rpx;
    // }

  }
}
  
</style>